<template>
  <el-form class="account_reset_password-wrapper" size="mini">
    <el-form-item lable="重设密码">
      <div v-if="inputShow" class="edit-wrapper">
        <el-input
          v-if="verifyCodeCD===0"
          v-model="sign"
          class="new_value-input"
          placeholder="输入手机号/邮箱"
        />
        <el-input v-else v-model="newPassword" class="new_value-input" placeholder="输入新密码" />
        <el-input
          v-if="verifyCodeCD>0"
          v-model="verifyCode"
          class="verify_code-input"
          placeholder="请输入验证码"
        />
        <el-button v-if="verifyCode.length===6" type="success" @click="submit">确定</el-button>
        <el-button v-else type="primary" :disabled="verifyCodeCD>0" @click="getVerifyCodeHandler">
          <span>获取验证码</span>
          <span v-if="verifyCodeCD>0">({{ verifyCodeCD }})</span>
        </el-button>
        <el-button type="danger" @click="inputShow = false">取消</el-button>
      </div>
      <el-button v-else type="info" @click="inputShow = true">重设密码</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { resetPassword } from "@/api/user";
import { getVerifyCode } from "@/api/utils";

export default {
    data() {
        return {
            sign: "",
            inputShow: false,
            newPassword: "",
            verifyCodeCD: 0,
            verifyCode: "",
            timer: null,
        };
    },
    computed: {
        signType() {
            return this.sign.indexOf("@") !== -1 ? "email" : "phone";
        },
    },
    destroyed() {
        clearInterval(this.timer); // 销毁定时器
    },
    methods: {
        async getVerifyCodeHandler() {
            const sendData = { type: this.signType };
            sendData[this.signType] = this.sign;
            const data = await this.getVerifyCode(sendData);
            this.comVerifyCodeCD(this, data);
        },
        async getVerifyCode(sendData) {
            const { code, message, data } = await getVerifyCode(sendData);
            const isSuccess = code === 200;
            this.$message({
                type: isSuccess ? "success" : "error",
                message,
            });
            return data;
        },
        comVerifyCodeCD(temp, data) {
            const expiresIn = data.expiresIn || 0;
            temp.verifyCodeCD = 0;
            this.timer = setInterval(() => {
                if (expiresIn < Date.now()) {
                    clearInterval(this.timer);
                    temp.verifyCodeCD = 0;
                    temp.verifyCode = "";
                }
                const diff = (expiresIn - Date.now()) / 1000;
                temp.verifyCodeCD = Math.ceil(diff);
            }, 1000);
        },
        async submit() {
            const {
                verifyCode, sign, signType, newPassword,
            } = this;
            const sendData = { verifyCode, newPassword };
            sendData[signType] = sign;
            const { code, message } = await resetPassword(sendData);
            const isSuccess = code === 200;
            this.$message({
                type: isSuccess ? "success" : "error",
                message,
            });
            if (isSuccess) {
                // 修改成功后重设他的初始值
                this.inputShow = false;
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.account_reset_password-wrapper {
  width: $baseWidth;
  margin: auto;
  .new_value-input {
    width: 200px;
    margin-right: 10px;
  }
  .edit-wrapper {
    display: flex;
    .verify_code-input {
      width: 110px;
      margin-right: 10px;
    }
  }
}
</style>
